﻿@model List<CoffeeShop.Models.Entities.Category>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="/Home/Index">Trang chủ</a>

            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>
        <li class="active">Quản lý loại sản phẩm</li>
    </ul>
    <!--.breadcrumb-->
</div>

<div class="page-content">
    <div>
        <h1 class="row-fluid header smaller lighter purple">
            <span class="span9">Quản lý loại sản phẩm</span>
            <span class="span3">
                <a data-toggle="modal" href="#tblAddCategory" class="pull-right inline">
                    <button class="btn btn-primary" id="btnAdd">
                        <i class="icon-plus"></i>
                        Thêm mới
                    </button>
                </a>
            </span>
        </h1>
    </div>

    <div class="row-fluid" id="categoriesTable">
        @Html.Partial("_CategoryList", Model)
    </div>

    <!-- Form add new Category-->
    <div class="row-fluid">
        <div id="tblAddCategory" class="modal hide" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="blue bigger">Thông tin loại sản phẩm</h4>
            </div>

            <div class="modal-body overflow-visible">
                <form id="formAddCategory">
                    <div class="row-fluid">
                        <div class="span5">
                            <div class="ace-file-input ace-file-multiple">
                                <input type="file" id="imageAddFile">
                            </div>
                        </div>

                        <div class="vspace"></div>

                        <div class="span7">
                            <div class="control-group" id="groupAddCategoryName">
                                <label class="control-label" for="form-field-categoryname">Tên loại sản phẩm</label>
                                <div class="controls">
                                    <input type="text" id="txtAddCategoryName" name="txtAddCategoryName" placeholder="Tên loại sản phẩm">
                                    <div id="existedAddCategoryName" style="display: none" class="help-block">
                                        Loại sản phẩm đã được sử dụng!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn btn-small" data-dismiss="modal">
                    <i class="icon-remove"></i>
                    Hủy
                </button>

                <button class="btn btn-small btn-primary" onclick="addCategory()">
                    <i class="icon-ok"></i>
                    Lưu
                </button>
            </div>
        </div>
    </div>
    <!-- End form add new Category-->

    <!-- Form update Category-->
    <div class="row-fluid">
        <div id="tblUpdateCategory" class="modal hide" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="blue bigger">Thông tin loại sản phẩm</h4>
            </div>

            <div class="modal-body overflow-visible">
                <form id="formUpdateCategory">
                    <div class="row-fluid">
                        <input type="text" id="txtUpdateCategoryID" name="txtUpdateCategoryID" style="display: none">

                        <div class="span7">
                            <div class="control-group" id="groupUpdateCategoryName">
                                <label class="control-label" for="form-field-categoryname">Tên loại sản phẩm</label>
                                <div class="controls">
                                    <input type="text" id="txtUpdateCategoryName" name="txtUpdateCategoryName" placeholder="Tên loại sản phẩm">
                                    <div id="existedUpdateCategoryName" style="display: none" class="help-block">
                                        Loại sản phẩm đã được sử dụng!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button class="btn btn-small" data-dismiss="modal">
                    <i class="icon-remove"></i>
                    Hủy
                </button>

                <button class="btn btn-small btn-primary" onclick="updateCategory()">
                    <i class="icon-ok"></i>
                    Lưu
                </button>
            </div>
        </div>
    </div>
    <!-- End form update Category-->
</div>

<script>
    $(function () {
        var oTable1 = $('#sample-table-2').dataTable({
            "aoColumns": [
              null, null, { "bSortable": false }
            ]
        });

        validateAddCategory("#formAddCategory");
        validateUpdateCategory("#formUpdateCategory");
    })

    // Validate Update Form
    function validateAddCategory(validateForm) {
        $(validateForm).validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                txtAddCategoryName: {
                    required: true,
                    maxlength: 50
                }
            },
            messages: {
                txtAddCategoryName: {
                    required: "Xin hãy nhập tên loại sản phẩm!",
                    maxlength: "Tên loại sản phẩm tối đa 50 ký tự!"
                }
            },
            highlight: function (e) {
                $(e).closest('.control-group').removeClass('info').addClass('error');
            },
            success: function (e) {
                $(e).closest('.control-group').removeClass('error').addClass('info');
                $(e).remove();
            }
        });
    }

    // Show message error when insert a new Area
    function showAddMessageError() {
        $.gritter.add({
            title: 'Tạo mới loại sản phẩm thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Show message success when insert a new Area
    function showMessageSuccess() {
        $.gritter.add({
            title: 'Tạo mới loại sản phẩm thành công!',
            text: 'Thông tin loại sản phẩm vừa nhập đã được tạo!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Cleanning add form when user finish insert a new Area
    function clearFormAddCategory() {
        $('#txtAddCategoryName').val('');
    }

    // Add a new office method
    function addCategory() {
        if ($('#formAddCategory').valid()) {
            editFr = $('#tblAddCategory').val();
            var categoryName = $('#txtAddCategoryName', editFr).val();
            $.post("/Category/CreateCategory", {
                categoryName: categoryName
            }, function (result) {
                if (result == "ExistedCategory") {
                    // Show error duplicate message
                    $('#existedAddCategoryName').attr("style", "display: block");
                    $('#groupAddCategoryName').removeClass('info').addClass('error');
                }
                if (result == "CreateSuccessful") {
                    $('.close').click();
                    reloadTable();
                    clearFormAddCategory();
                    showMessageSuccess();
                }
                if (result == "CreateFail") {
                    $('.close').click();
                    clearFormAddCategory();
                    showAddMessageError();
                }
            }).error(function () {
                $('.close').click();
                showMessageError();
            });
        }
    }

    // Get a category by categoryId
    function getCategoryById(categoryId) {
        $.ajax({
            url: '@Url.Action("GetCategoryById", "Category")',
            type: 'GET',
            cache: false,
            data: { categoryId: categoryId },
            success: function (data) {
                $("#txtUpdateCategoryID").val(data.CategoryId)
                if (data.IsDeleted == true) {
                    $("#txtUpdateCategoryName").val(data.CategoryName).prop('readonly', true);
                }
                else {
                    $("#txtUpdateCategoryName").val(data.CategoryName).prop('readonly', false);
                }
            },
            error: function (data) {
                alert('Không thể lấy dữ liệu. Xin hãy thử lại!');
            }
        });
    }

    // Validate Update Form
    function validateUpdateCategory(validateForm) {
        $(validateForm).validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                txtUpdateCategoryName: {
                    required: true,
                    maxlength: 50
                }
            },
            messages: {
                txtUpdateCategoryName: {
                    required: "Xin hãy nhập tên loại sản phẩm!",
                    maxlength: "Tên loại sản phẩm tối đa 50 ký tự!"
                }
            },
            highlight: function (e) {
                $(e).closest('.control-group').removeClass('info').addClass('error');
            },
            success: function (e) {
                $(e).closest('.control-group').removeClass('error').addClass('info');
                $(e).remove();
            }
        });
    }

    // Show message error when update a Category
    function showUpdateMessageError() {
        $.gritter.add({
            title: 'Cập nhật loại sản phẩm thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Show message success when update a Category
    function showUpdateMessageSuccess() {
        $.gritter.add({
            title: 'Cập nhật loại sản phẩm thành công!',
            text: 'Thông tin loại sản phẩm đã được cập nhật!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Update method
    function updateCategory() {
        if ($('#formUpdateCategory').valid()) {
            editFr = $('#tblUpdateCategory').val();
            var categoryId = $('#txtUpdateCategoryID', editFr).val();
            var categoryName = $('#txtUpdateCategoryName', editFr).val();

            $.post("/Category/UpdateCategory", {
                categoryId: categoryId, categoryName: categoryName
            }, function (result) {
                if (result == "ExistedCategory") {
                    // Show error duplicate message
                    $('#existedUpdateCategoryName').attr("style", "display: block");
                    $('#groupUpdateCategoryName').removeClass('info').addClass('error');
                }
                if (result == "UpdateSuccessful") {
                    $('.close').click();
                    reloadTable();
                    clearFormUpdateCategory();
                    showUpdateMessageSuccess();
                }
                if (result == "UpdateFail") {
                    $('.close').click();
                    clearFormUpdateCategory();
                    showUpdateMessageError();
                }
            }).error(function () {
                $('.close').click();
                showMessageUpdateError();
            });
        }
    }

    // Cleanning add form when user finish insert a new Area
    function clearFormUpdateCategory() {
        $('#txtUpdateCategoryID').val('');
        $('#txtUpdateCategoryName').val('');
    }

    // Reload table when users finish update or insert a new area
    function reloadTable() {
        $.ajax({
            url: "/Category/LoadAllCategories",
            type: "POST",
            success: function (data) {
                $('#categoriesTable').html(data);
            }
        });
    }
</script>
